<template>
    <div>
        <div class="center-top-content animate__animated animate__fadeInDown">
            <div class="content">
                <div class="item">
                    <img src="@/assets/three/image/optimization/add-alum.svg" alt="">
                    <div class="label">
                        <div>
                            <Statistic :value="workOrderStatistics.nh3SavingRate"
                                :valueStyle="{ color: '#31c5db', fontSize: '22px' }" suffix="%"
                                :suffixStyle="{ fontSize: '20px', color: '#31c5db', fontWeight: 'bold' }" />
                        </div>
                        <div class="name">
                            加矾节约率
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="@/assets/three/image/optimization/chlorination.svg" alt="">
                    <div class="label">
                        <div>
                            <Statistic :value="workOrderStatistics.clSavingRate"
                                :valueStyle="{ color: '#31c5db', fontSize: '22px' }" suffix="%"
                                :suffixStyle="{ fontSize: '20px', color: '#31c5db', fontWeight: 'bold' }" />
                        </div>
                        <div class="name">
                            加氯节约率
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="@/assets/three/image/optimization/cumulative-addition-of-alum.svg" alt="">
                    <div class="label">
                        <div>
                            <Statistic :value="workOrderStatistics.totalNh3"
                                :valueStyle="{ color: '#31c5db', fontSize: '22px' }" suffix="%"
                                :suffixStyle="{ fontSize: '20px', color: '#31c5db', fontWeight: 'bold' }" />
                        </div>
                        <div class="name">
                            累计加矾
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="@/assets/three/image/optimization/cumulative-chlorination.svg" alt="">
                    <div class="label">
                        <div>
                            <Statistic :value="workOrderStatistics.totalCl"
                                :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="%"
                                :suffixStyle="{ fontSize: '20px', color: '#31c5db', fontWeight: 'bold' }" />
                        </div>
                        <div class="name">
                            累计加氯
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-bottom-content center-bottom-content-card animate__animated animate__fadeInDown">
            <div class="content">
                <div class="card ">
                    <img class="background" src="@/assets/three/image/optimization/center-bottom-content-background.png"
                        alt="">
                    <div class="card-header">
                        <div class="contrast">
                            <div class="item" @click="targetWaterQualityInformationActive(1)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 1 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    进水流量
                                </div>
                            </div>
                            <div class="item" @click="targetWaterQualityInformationActive(2)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 2 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    进水浊度
                                </div>
                            </div>
                            <div class="item" @click="targetWaterQualityInformationActive(3)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 3 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    加矾流量
                                </div>
                            </div>
                            <div class="item" @click="targetWaterQualityInformationActive(4)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 4 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    加氯流量
                                </div>
                            </div>
                            <div class="item" @click="targetWaterQualityInformationActive(5)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 5 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    滤前浊度
                                </div>
                            </div>
                            <div class="item" @click="targetWaterQualityInformationActive(6)">
                                <img class="item-img"
                                    :src="eaterQualityInformationActive == 6 ? contrastActiveImg : contrastImg" alt="">
                                <div class="label">
                                    清水池余氯
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="eCharts">
                        <ECharts :option="eaterQualityInformationOption" />
                    </div>
                </div>
            </div>
        </div>
        <div class="plate" ref="plate">
            <!-- <header class="header">
                <div class="header-title">工艺优化</div>
                <img class="header-img" src="@/assets/three/image/header.png">
            </header> -->
            <ZdyHeader title="工艺优化" />

            <div class="left-content  animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card left-card-1">
                        <img class="background" src="@/assets/three/image/optimization/left-card-1-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">关键指标分析</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="key-metrics-analysis">
                            <div class="item">
                                <div class="value">
                                    <img class="value-background"
                                        src="@/assets/three/image/optimization/alum-consumption.svg" alt="">
                                    <div class="msg">
                                        <Statistic :value="indexStatistics.nh3Consumption"
                                            :valueStyle="{ color: '#fff', fontSize: '18px' }" />
                                        <div class="suffix">g/t</div>
                                    </div>
                                </div>
                                <div class="label">
                                    吨水矾耗
                                </div>
                            </div>
                            <div class="item">
                                <div class="value">
                                    <img class="value-background"
                                        src="@/assets/three/image/optimization/chlorine-consumption.svg" alt="">
                                    <div class="msg">
                                        <Statistic :value="indexStatistics.disinfectantConsumption"
                                            :valueStyle="{ color: '#fff', fontSize: '18px' }" />
                                        <div class="suffix">g/t</div>
                                    </div>
                                </div>
                                <div class="label">
                                    吨水矾耗
                                </div>
                            </div>
                            <div class="item">
                                <div class="value">
                                    <img class="value-background"
                                        src="@/assets/three/image/optimization/power-consumption.svg" alt="">
                                    <div class="msg">
                                        <Statistic :value="indexStatistics.powerConsumption"
                                            :valueStyle="{ color: '#fff', fontSize: '18px' }" />
                                        <div class="suffix">Kwh/t</div>
                                    </div>
                                </div>
                                <div class="label">
                                    吨水矾耗
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="contrast">
                                <div class="item" @click="targetElectricityActive('1')">
                                    <img class="item-img" :src="contrastActive == '1' ? contrastActiveImg : contrastImg"
                                        alt="">
                                    <div class="label">
                                        加矾对比
                                    </div>
                                </div>
                                <div class="item" @click="targetElectricityActive('2')">
                                    <img class="item-img" :src="contrastActive == '2' ? contrastActiveImg : contrastImg"
                                        alt="">
                                    <div class="label">
                                        加氯对比
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="eCharts">
                            <ECharts :option="coreOption" />
                        </div>
                    </div>
                    <div class="card left-card-2">
                        <img class="background" src="@/assets/three/image/optimization/left-card-2-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="contrast">
                                <div class="item" @click="targetWaterQualityActive('0')">
                                    <img class="item-img"
                                        :src="waterQualityActive == '0' ? contrastActiveImg : contrastImg" alt="">
                                    <div class="label">
                                        进水水质
                                    </div>
                                </div>
                                <div class="item" @click="targetWaterQualityActive('1')">
                                    <img class="item-img"
                                        :src="waterQualityActive == '1' ? contrastActiveImg : contrastImg" alt="">
                                    <div class="label">
                                        出水水质
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="waterQuality"
                            v-if="waterQualityActive == '0' && factoryWaterQualityStatistics?.inflowMetrics">
                            <div class="item">
                                <img src="@/assets/three/image/optimization/turbidity.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.inflowMetrics[0]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.inflowMetrics[0]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="NTU"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/ph-value.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.inflowMetrics[1]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.inflowMetrics[1]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/temperature.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.inflowMetrics[2]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.inflowMetrics[2]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="℃"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/conductivity.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.inflowMetrics[3]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.inflowMetrics[3]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="mg/L"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                        </div>
                        <div class="waterQuality"
                            v-if="waterQualityActive == '1' && factoryWaterQualityStatistics?.outflowMetrics">
                            <div class="item">
                                <img src="@/assets/three/image/optimization/turbidity.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.outflowMetrics[0]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.outflowMetrics[0]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="NTU"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/ph-value.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.outflowMetrics[1]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.outflowMetrics[1]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/temperature.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.outflowMetrics[2]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.outflowMetrics[2]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="℃"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/three/image/optimization/conductivity.svg" alt="">
                                <div class="label">{{ factoryWaterQualityStatistics?.outflowMetrics[3]?.indicatorName }}
                                </div>
                                <div class="value">
                                    <Statistic :value="factoryWaterQualityStatistics?.outflowMetrics[3]?.value"
                                        :valueStyle="{ color: '#31c5db', fontSize: '20px' }" suffix="mg/L"
                                        :suffixStyle="{ fontSize: '14px', color: '#31c5db', fontWeight: 'bold' }" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content  animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/optimization/right-card-1-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备管理</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="device-management">
                            <div class="item">
                                <div class="value">
                                    <Statistic :value="deviceStatusStatistics.normalRunData"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '20px' }" />
                                </div>
                                <div class="label">正常运行</div>
                                <img src="@/assets/three/image/optimization/run.svg" alt="">
                            </div>
                            <div class="item">
                                <div class="value">
                                    <Statistic :value="deviceStatusStatistics.waitRepairNum"
                                        :valueStyle="{ color: '#1481E0', fontSize: '20px' }" />
                                </div>
                                <div class="label">待维修</div>
                                <img src="@/assets/three/image/optimization/repair.svg" alt="">
                            </div>
                            <div class="item">
                                <div class="value">
                                    <Statistic :value="deviceStatusStatistics.faultNum"
                                        :valueStyle="{ color: '#D43030', fontSize: '20px' }" />
                                </div>
                                <div class="label">故障</div>
                                <img src="@/assets/three/image/optimization/fault.svg" alt="">
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">加药间</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="dosing-room-video">
                            <div class="video-item">
                                <video-player
                                    src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4"
                                    class="video" poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" />
                            </div>
                        </div>
                    </div>
                    <div class="card right-card-2">
                        <img class="background" src="@/assets/three/image/optimization/right-card-2-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">实时告警</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="real-time-alerts">
                            <div class="item" v-for="(item, index) in realTimeAlarm" :key="index">
                                <div class="error">
                                </div>
                                <div class="item-message">
                                    <div class="info">
                                        <div class="label">{{ item.location }}</div>
                                        <div class="time">{{ item.alarmTime }}</div>
                                    </div>
                                    <div class="msg">
                                        {{ item.description }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">专家建议</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="expert-advice">
                            <div class="item">
                                <div class="index">1</div>
                                <div class="msg">
                                    当前滤前浊度过低，可降低20%加药量
                                </div>
                            </div>
                            <div class="item">
                                <div class="index">2</div>
                                <div class="msg">
                                    当前滤前浊度过低，可降低20%加药量
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import * as echarts from 'echarts';
import 'animate.css/animate.min.css';
import { onMounted } from 'vue';
import { ref } from 'vue';

import { getWorkOrderStatistics, getIndexStatistics, getFactoryWaterQualityStatistics, getDmaProductionDifferenceRanking, getDeviceStatusStatistics, getRealTimeAlarm, getRealTimeData } from "@/api/prod_operate/configuration"

import contrastImg from '@/assets/three/image/contrast.svg';
import contrastActiveImg from '@/assets/three/image/contrast-active.svg';

const workOrderStatistics = ref({});
const indexStatistics = ref({});
const plate = ref(null);
const contrastActive = ref('1');
const waterQualityActive = ref('0');
const factoryWaterQualityStatistics = ref([]);
const deviceStatusStatistics = ref({});
const realTimeAlarm = ref([]);
const targetElectricityActive = (value) => {
    contrastActive.value = value;
    getEcData(value);
}
const targetWaterQualityActive = (value) => {
    waterQualityActive.value = value;
}

const eaterQualityInformationActive = ref(1);

const coreOption = ref(null);

const eaterQualityInformationOption = ref(null);

const targetWaterQualityInformationActive = (value) => {
    eaterQualityInformationActive.value = value;
    getRealTimeData({ type: value }).then(res => {
        console.log(res);

        eaterQualityInformationOption.value = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    return `${params[0].axisValue}<br/>${params[0].marker} ${params[0].seriesName}: ${params[0].value}`;
                }
            },
            xAxis: {
                type: 'category',
                data: res.data.timeList,
                axisLabel: {
                    color: '#fff',
                    interval: 0, // 显示所有标签
                    fontSize: 10, // 减小字体大小
                    formatter: function (value) {
                        // 如果时间格式太长可以截取部分显示
                        return value.length > 10 ? value.substring(0, 10) + '...' : value;
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    alignWithLabel: true // 刻度与标签对齐
                }
            },
            yAxis: {
                type: 'value',
                name: 'L/h',
                nameTextStyle: {
                    color: '#fff',
                    padding: [0, 0, 0, 30] // 调整名称位置
                },
                axisLabel: {
                    color: '#fff',
                    margin: 10 // 增加标签边距
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#333']
                    }
                }
            },
            series: [{
                name: '进水流量',
                type: 'line',
                smooth: true,
                itemStyle: {
                    color: '#00bfa5'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0, 191, 165, 0.8)' },
                        { offset: 1, color: 'rgba(0, 191, 165, 0)' }
                    ])
                },
                data: res.data.runDataList
            }],
            grid: {
                top: '5%',    // 增加顶部间距
                left: '3%',    // 增加左侧间距
                right: '3%',   // 增加右侧间距
                bottom: '5%', // 增加底部间距给旋转的标签
                containLabel: true
            },

        };
    })
}


const getEcData = (type) => {

    getDmaProductionDifferenceRanking({ type }).then(res => {
        console.log(res);

        coreOption.value = {
            title: {
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['出水', '进水'],
                top: 0,
                left: 'center',
                padding: [10, 10],
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.timeList,
                axisLabel: {
                    color: '#FFFFFF' // 设置X轴标签文字颜色为白色
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#333']
                    }
                }
            },
            series: [
                {
                    name: '出水',
                    type: 'line',
                    itemStyle: {
                        color: '#007bff'
                    },
                    data: res.data.outflowData
                },
                {
                    name: '进水',
                    type: 'line',
                    itemStyle: {
                        color: '#ff7f0e'
                    },
                    data: res.data.inflowData
                }
            ],
            grid: {
                left: '5%',
                bottom: '2%',
                containLabel: true
            }
        };

    })
}

onMounted(() => {
    getWorkOrderStatistics().then(res => {
        workOrderStatistics.value = res.data;
    })
    getIndexStatistics({ type: contrastActive.value }).then(res => {
        indexStatistics.value = res.data;
    })
    getFactoryWaterQualityStatistics().then(res => {
        factoryWaterQualityStatistics.value = res.data;
        console.log();

    })

    getDeviceStatusStatistics().then(res => {
        deviceStatusStatistics.value = res.data;
    })
    getRealTimeAlarm().then(res => {
        realTimeAlarm.value = res.data;
    })

    getEcData(contrastActive.value);

    targetWaterQualityInformationActive(eaterQualityInformationActive.value);

})
</script>

<style lang="scss" scoped>
@import "@/assets/styles/three-home.scss";

.contrast {
    display: flex;
    width: 100%;
    padding: 10px 0;
    margin-left: 10px;

    .item {
        width: 110px;
        height: 40px;
        position: relative;
        line-height: 40px;
        text-align: center;
        margin-left: 10px;
        cursor: pointer;
    }

    .label {
        color: #fff;
        font-size: 14px;
    }

    .item-img {
        position: absolute;
        z-index: -1;
        left: 0;
        width: 110px;
        height: 40px;
    }
}

.left-card-1 {
    height: 560px !important;

    .key-metrics-analysis {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .value {
                width: 88px;
                height: 88px;
                position: relative;

                .value-background {
                    position: absolute;
                    z-index: -1;
                    width: 88px;
                    height: 88px;
                }

                .msg {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    height: 100%;
                    width: 100%;

                    .suffix {
                        font-size: 14px;
                        color: #fff;
                    }
                }
            }

            .label {
                margin-top: 10px;
                font-size: 14px;
                color: #fff;
            }
        }
    }

    :deep(.chart-container) {
        height: 270px !important;
    }
}

.left-card-2 {
    height: 300px !important;

    .waterQuality {
        margin-top: 10px;
        margin-left: 30px;
        display: flex;
        flex-direction: column;

        .item {
            img {
                width: 32px;
                height: 32px;
            }

            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px;

            .label {
                text-align: center;
                flex: 1;
                font-size: 14px;
                color: #fff;
            }

            .value {
                flex: 1;
            }
        }
    }
}

.right-card-1 {
    height: 448px !important;

    .device-management {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 45.18px;
                height: 25.42px;
            }

            .label {
                margin: 6px 0 10px;
                color: #fff;
                font-size: 14px;
            }
        }
    }

    .dosing-room-video {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 20px 10px;
        display: flex;
        justify-content: center;
        height: 200px;

        .video-item {
            width: 90%;
            height: 100%;
            aspect-ratio: 16/9;
        }

        .video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.right-card-2 {
    height: 410px !important;

    .real-time-alerts {
        width: 100%;

        .item {
            display: flex;
            padding-left: 30px;
            margin: 10px 0;

            .error {
                width: 15px;
                height: 15px;
                background: red;
                border-radius: 50%;
                margin-right: 15px;
                margin-top: 6px;
            }
        }

        .item-message {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 80%;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-around;

                .label {
                    text-align: left;
                    flex: 1;
                    color: #0ec1d3;
                    font-size: 16px;
                }

                .time {
                    flex: 2;
                    text-align: right;
                    font-size: 14px;
                    color: #fff;
                }
            }

            .msg {
                font-size: 14px;
                color: #fff;
                margin-top: 6px;
            }
        }
    }

    .expert-advice {
        .item {
            display: flex;
            align-items: center;
            margin: 16px 30px;

            .index {
                width: 20px;
                height: 20px;
                border: 1px solid #0066AF;
                text-align: center;
                line-height: 18px;
                color: #0183d6;
                font-size: 14px;
            }

            .msg {
                font-size: 14px;
                color: #fff;
                margin-left: 15px;
            }
        }
    }
}

.center-bottom-content {
    width: 800px !important;
    height: 230px;
    bottom: 130px;
    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
        height: 230px !important;

        .card {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .background {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

        .card-header {
            background-repeat: repeat-x;
            position: relative;
            background-position: 0 0;
        }

        :deep(.chart-container) {
            height: 165px !important;
        }
    }
}

.center-top-content {
    position: absolute;
    z-index: 999;
    width: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 120px;

    .content {
        display: flex;
        justify-content: space-between;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 62px;
                height: 76.36px;
            }

            .label {
                margin-left: 10px;

                .name {
                    font-size: 14px;
                    color: #fff;
                    margin-top: 5px;
                }
            }
        }
    }
}
</style>